<template>
  <div class="wrap-scroll" :ref="wrapRef" :style="{width: `${width}px`, height: `${height}px`}" >
    <div class="scroll-area" :ref="scrollRef" :style="type === 'vertical' ? verticalStyle: defaultStyle" @mouseenter="stopScroll" @mouseleave="animate">
      <slot></slot>
      <slot v-if="showDouble"></slot>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";

export default {
  name: 'row-scroll',
  props: {
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 50
    },
    type: {
      type: String,
      default: 'default'
    },
    // 鼠标悬停
    hoverStop: {
      type: Boolean,
      default: false
    }
    // showDouble: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data() {
    return {
      wrapRef: 'wrap' + Math.random(),
      scrollRef: 'scroll' + Math.random(),
      stop:true,
      lastTime:'',
      animeJob:'',
      showDouble: false,
      scrollHeight: undefined,
      defaultStyle: {
        display: 'inline-block',
        'white-space': 'nowrap',
      },
      verticalStyle: {
        display: 'block',
      }
    }
  },
  watch: {
    scrollHeight() {
      const showArea = this.$refs[this.wrapRef]
      const slotArea = this.$refs[this.scrollRef]
      this.showDouble = showArea.clientHeight <= slotArea.scrollHeight;
    },
    scrollWidth() {
      // const showArea = this.$refs[this.wrapRef]
      // const slotArea = this.$refs[this.scrollRef]
      this.showDouble = true
    }
  },
  mounted() {
    // document.querySelector("#scroll").addEventListener('scroll',this.stopScroll,true)
    //每次滚动条向左移动2，改变speed可以调整滚动速度
    // const speed = 1
    //设置浏览器刷新帧率，调整滚动速度
    this.lastTime = new Date().getTime() //上次执行的时刻
    // 在mounted阶段，才可以获取真实DOM节点

    // showArea.scrollTop = 0
    const showArea = this.$refs[this.wrapRef]
    const slotArea = this.$refs[this.scrollRef]
    // console.log(showArea.scrollHeight, slotArea.scrollHeight)
    if (this.type === 'vertical') {
      this.showDouble = showArea.clientHeight <= slotArea.scrollHeight;
      this.animeJob = requestAnimationFrame(this.animate);

      // 监听slot内容高度，防止内容后渲染而无法滚动
      const erd = elementResizeDetectorMaker();
      erd.listenTo(slotArea, element => {
        this.$nextTick(() => {
          //监听到事件后执行的业务逻辑
          this.scrollHeight = element.offsetHeight
        });
      });
    } else {
      this.showDouble = true
      this.animeJob = requestAnimationFrame(this.animate);

      // 监听slot内容高度，防止内容后渲染而无法滚动
      const erd = elementResizeDetectorMaker();
      erd.listenTo(slotArea, element => {
        this.$nextTick(() => {
          //监听到事件后执行的业务逻辑
          this.scrollWidth = element.offsetWidth
        });
      });
    }

  },
  methods: {
    animate() {
      const fps = 30
      const fpsInterval = 1000 / fps
      const showArea = this.$refs[this.wrapRef]
      const slotArea = this.$refs[this.scrollRef]
      this.animeJob = requestAnimationFrame(this.animate);
      // 执行时的时间
      let now = new Date().getTime()
      let elapsed = now - this.lastTime;
      // 经过了足够的时间
      if (elapsed > fpsInterval) {
        this.lastTime = now - (elapsed % fpsInterval); //校正当前时间
        // console.log(showArea)
        if (this.type === 'vertical' && showArea.scrollLeft) {
          if (showArea.scrollTop >= (slotArea.scrollHeight / 2)) {
            showArea.scrollTop = 0
            // this.showDouble = false
          } else {
            showArea.scrollTop += 1
          }
        } else {
          if (showArea.scrollLeft >= (slotArea.scrollWidth / 2)) {
            showArea.scrollLeft = 0
          } else {
            showArea.scrollLeft += 1
          }
        }
      }
    },
    resetScroll() {
      this.$refs[this.wrapRef].scrollTop = 0
      this.$refs[this.wrapRef].scrollLeft = 0
    },
    stopScroll(){
      if (this.hoverStop) {
        cancelAnimationFrame(this.animeJob)
      }
    },
  },
  beforeUnmount () {
    cancelAnimationFrame(this.animeJob)
  }
}
</script>

<style scoped>
.wrap-scroll{
  overflow: hidden;
}
</style>
